<template>
  <view :class="['giftbook-detail', `theme-${currentTheme}`]">
    <!-- 礼簿信息 -->
    <GiftbookInfo 
      :giftBook="giftBook" 
      :giftBookId="giftBookId" 
      @update:giftBook="onGiftBookUpdate"
    />

    <!-- 记录列表组件 -->
    <RecordList 
      :records="giftBook?.records || []" 
      :giftBookId="giftBookId"
      @add-record="showAddRecordModal"
      @edit-record="handleEditRecord"
      @delete-record="handleDeleteRecord"
    />
                
    <!-- 添加/编辑记录弹窗组件 -->
    <RecordModal
      :show="showPopup"
      :isBatch="isBatchAdd"
      :isEditing="isEditing"
      :initialFormData="formData"
      :giftBookId="giftBookId"
      @close="closeRecordModal"
      @submit="handleSubmitRecord"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useContactStore } from '@/store/modules/contact';
import { useGiftBookStore } from '@/store/modules/giftbook';
import RecordModal from './components/RecordModal.vue';
import RecordList from './components/RecordList.vue';
import { GiftRecord, Contact, GiftBook } from '@/types/giftbook';
import { useThemeStore } from '@/store/modules/theme';
import useThemeMixin from '@/mixins/themeMixin';
import GiftbookInfo from './components/GiftbookInfo.vue';
import { nanoid } from '@/utils/nanoid-polyfill';

interface PageInstance {
  options?: {
    id?: string;
  };
}

const giftBookStore = useGiftBookStore();
const contactStore = useContactStore();
const themeStore = useThemeStore();
const currentTheme = computed(() => themeStore.currentTheme);

// 使用主题mixin
useThemeMixin();

// 获取礼簿ID
const giftBookId = ref('');

// 获取礼簿信息
const giftBook = computed(() => {
  return giftBookStore.getCurrentGiftBook;
});

// 获取联系人列表
const contacts = computed(() => {
  return contactStore.getAllContacts;
});

// 记录类型选项
const recordTypes = [
  { label: '收礼', value: 'receive' },
  { label: '送礼', value: 'give' }
];

// 弹窗控制
const showPopup = ref(false);

// 是否批量添加
const isBatchAdd = ref(false);

// 表单数据
const formData = ref({
  id: '',
  contactId: '',
  contactName: '',
  type: 'receive',
  amount: '',
  giftName: '',
  remark: '',
});

// 是否处于编辑状态
const isEditing = ref(false);

// 选中的联系人
const selectedContact = computed(() => {
  return contacts.value.find((c: Contact) => c.id === formData.value.contactId);
});

// 获取记录类型标签
const getRecordTypeLabel = (type: string | undefined) => {
  if (!type) return '请选择类型';
  const typeMap: Record<string, string> = {
    receive: '收礼',
    give: '送礼'
  };
  return typeMap[type] || '-';
};

// 获取联系人姓名
const getContactName = (contactId: string) => {
  if (!contactId) return '未知联系人';
  const contact = contacts.value.find((c: Contact) => c.id === contactId);
  return contact?.name || '未知联系人';
};

// 格式化时间
const formatTime = (timestamp: number) => {
  const date = new Date(timestamp);
  return `${String(date.getFullYear())}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 格式化金额，大数字使用简写，整数不显示小数部分
const formatAmount = (amount: number) => {
  if (amount === undefined || amount === null) return '0';
  
  // 对大金额进行简化处理
  if (amount >= 100000000) { // 亿
    const value = amount / 100000000;
    return (Number.isInteger(value) ? value.toString() : value.toFixed(2)) + '亿';
  } else if (amount >= 10000) { // 万
    const value = amount / 10000;
    return (Number.isInteger(value) ? value.toString() : value.toFixed(2)) + '万';
  }
  
  // 整数金额不显示小数点后的零
  return Number.isInteger(amount) ? amount.toString() : amount.toFixed(2);
};

// 处理GiftbookInfo组件更新事件
const onGiftBookUpdate = (updatedGiftBook: GiftBook) => {
  // 处理更新逻辑，如果需要的话
  console.log('礼簿信息已更新:', updatedGiftBook);
};

// 处理添加记录按钮点击
const showAddRecordModal = (isBatch: boolean) => {
  formData.value = {
    id: '',
    contactId: '',
    contactName: '',
    type: 'receive',
    amount: '',
    giftName: '',
    remark: '',
  };
  isEditing.value = false;
  isBatchAdd.value = isBatch;
  showPopup.value = true;
};

// 处理编辑记录
const handleEditRecord = (record: GiftRecord) => {
  formData.value = {
    id: record.id,
    contactId: record.contactId,
    contactName: record.contactName || getContactName(record.contactId),
    type: record.type,
    amount: record.amount.toString(),
    giftName: record.giftName || '',
    remark: record.remarks || '',
  };
  isEditing.value = true;
  isBatchAdd.value = false;
  showPopup.value = true;
};

// 关闭记录弹窗
const closeRecordModal = () => {
  showPopup.value = false;
};

// 处理删除记录
const handleDeleteRecord = async (record: GiftRecord) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这条记录吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await giftBookStore.deleteGiftRecord(giftBookId.value, record.id);
          uni.showToast({
            title: '删除成功',
            icon: 'none',
          });
        } catch (error) {
          uni.showToast({
            title: '删除失败',
            icon: 'none',
          });
        }
      }
    },
  });
};

// 处理提交记录
const handleSubmitRecord = async (payload: any) => {
  try {
    console.log('提交的记录数据:', payload);
    
    if (payload.isBatch) {
      // 批量提交
      for (const record of payload.records) {
        // 如果没有contactId但有contactName，检查是否存在同名联系人
        if (!record.contactId && record.contactName) {
          // 查找是否有同名联系人
          const existingContact = contacts.value.find((contact: Contact) => contact.name === record.contactName);
          
          if (existingContact) {
            // 如果找到同名联系人，使用已有联系人ID
            record.contactId = existingContact.id;
            console.log('使用已有联系人:', existingContact.name, existingContact.id);
          } else {
            // 创建新联系人
            const newContactId = await contactStore.addContact({
              name: record.contactName,
              phone: '',
              address: '',
              relationship: '',
              notes: '',
              createTime: new Date().getTime(),
              updateTime: new Date().getTime()
            });
            record.contactId = newContactId;
            console.log('创建新联系人:', record.contactName, newContactId);
          }
        }
        
        // 提交记录，确保每条记录都有唯一ID
        await giftBookStore.addGiftRecord(
          giftBookId.value,
          {
            ...record,
            id: nanoid(), // 使用nanoid生成唯一ID
            giftBookId: giftBookId.value,
            createTime: new Date().getTime(),
            updateTime: new Date().getTime()
          }
        );
      }
      
      uni.showToast({
        title: '批量添加成功',
        icon: 'none'
      });
    } else {
      // 单笔记录逻辑
      // 如果没有contactId但有contactName，检查是否存在同名联系人
      if (!payload.contactId && payload.contactName) {
        // 查找是否有同名联系人
        const existingContact = contacts.value.find((contact: Contact) => contact.name === payload.contactName);
        
        if (existingContact) {
          // 如果找到同名联系人，使用已有联系人ID
          payload.contactId = existingContact.id;
          console.log('使用已有联系人:', existingContact.name, existingContact.id);
        } else {
          // 创建新联系人
          const newContactId = await contactStore.addContact({
            name: payload.contactName,
            phone: '',
            address: '',
            relationship: '',
            notes: '',
            createTime: new Date().getTime(),
            updateTime: new Date().getTime()
          });
          payload.contactId = newContactId;
          console.log('创建新联系人:', payload.contactName, newContactId);
        }
      }

      if (isEditing.value) {
        // 更新记录 - 使用已有ID
        await giftBookStore.updateGiftRecord(
          giftBookId.value,
          {
            ...payload,
            giftBookId: giftBookId.value,
            updateTime: new Date().getTime()
          }
        );
        uni.showToast({
          title: '更新成功',
          icon: 'none'
        });
      } else {
        // 添加记录 - 使用nanoid生成新ID
        await giftBookStore.addGiftRecord(
          giftBookId.value,
          {
            ...payload,
            id: nanoid(), // 使用nanoid生成唯一ID
            giftBookId: giftBookId.value,
            createTime: new Date().getTime(),
            updateTime: new Date().getTime()
          }
        );
        uni.showToast({
          title: '添加成功',
          icon: 'none'
        });
      }
    }

    closeRecordModal();
  } catch (error) {
    console.error('提交记录失败:', error);
    uni.showToast({
      title: '操作失败',
      icon: 'none'
    });
  }
};

// 加载数据
onMounted(async () => {
  try {
    console.log("onMounted");
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1] as PageInstance;
  giftBookId.value = currentPage.options?.id || '';
    console.log("giftBookId:", giftBookId.value);
    
    // 先加载数据，添加错误处理
    try {
      // 分开调用，确定哪个出现问题
      console.log("开始加载礼簿数据");
      await giftBookStore.loadFromStorage().catch((e: Error) => {
        console.error("礼簿数据加载失败", e);
        throw e;
      });
      
      console.log("开始加载联系人数据");
      await contactStore.loadContacts().catch((e: Error) => {
        console.error("联系人加载失败", e);
        throw e;
      });
      
      console.log("数据加载完成");
    } catch (loadError) {
      console.error("数据加载时出错:", loadError);
    }
    
    // 直接检查存储中的原始数据
    console.log("检查原始存储数据");
    try {
      const rawData = uni.getStorageSync('giftbooks');
      console.log("原始存储数据有效:", !!rawData);
      if (rawData) {
        console.log("原始存储数据类型:", typeof rawData);
        try {
          const parsedData = JSON.parse(rawData);
          console.log("解析后数据有效:", !!parsedData);
          console.log("解析后数据类型:", Array.isArray(parsedData) ? "数组" : typeof parsedData);
          
          if (Array.isArray(parsedData)) {
            console.log("解析后数据长度:", parsedData.length);
            
            // 直接从原始数据中查找ID
            const directMatch = parsedData.find((item: any) => {
              console.log("检查ID:", item.id, "目标ID:", giftBookId.value);
              return item.id === giftBookId.value;
            });
            
            console.log("直接匹配结果:", directMatch ? "找到了" : "未找到");
            
            if (directMatch) {
              console.log("从原始数据设置礼簿信息");
              giftBookStore.setCurrentGiftBook(directMatch);
              return;
            }
          }
        } catch (parseError) {
          console.error("解析数据出错:", parseError);
        }
      }
    } catch (storageError) {
      console.error("读取存储出错:", storageError);
    }
    
    // 检查 store 中的数据
    console.log("检查 store 数据");
    const storeData = giftBookStore.getAllGiftBooks;
    console.log("store数据类型:", typeof storeData);
    console.log("store数据是否数组:", Array.isArray(storeData));
    if (Array.isArray(storeData)) {
      console.log("store数据长度:", storeData.length);
      
      if (storeData.length > 0) {
        console.log("尝试在store中查找ID:", giftBookId.value);
        const bookData = storeData.find((book: any) => book.id === giftBookId.value);
        if (bookData) {
          console.log("在store中找到礼簿数据");
          giftBookStore.setCurrentGiftBook(bookData);
          return;
        } else {
          console.log("在store中未找到礼簿数据");
        }
      }
    }
    
    // 如果到这里还没有找到数据，显示错误
    console.log("无法找到礼簿数据，返回上一页");
    uni.showToast({
      title: '礼簿不存在',
      icon: 'error'
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  } catch (error) {
    console.error("onMounted 发生异常:", error);
    uni.showToast({
      title: '加载失败',
      icon: 'error'
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style lang="scss">
// 颜色变量 - 改为page选择器
page {
  --primary-color: #1890ff;
  --primary-light: rgba(24, 144, 255, 0.1);
  --danger-color: #ff5252;
  --danger-light: rgba(255, 82, 82, 0.1);
  --warning-color: #ff9800;
  --text-primary: #333;
  --text-secondary: #666;
  --text-hint: #999;
  --bg-light: #f9f9f9;
  --bg-white: #fff;
  --border-light: #eee;
  --border-medium: #f0f0f0;
  --border-dashed: #ddd;
  
  // 尺寸变量
  --font-xs: 22rpx;
  --font-sm: 24rpx;
  --font-md: 28rpx;
  --font-lg: 32rpx;
  --font-xl: 36rpx;
  --radius-sm: 6rpx;
  --radius-md: 8rpx;
  --radius-lg: 12rpx;
  --radius-xl: 20rpx;
  --radius-circle: 44rpx;
  --shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  --spacing-xs: 4rpx;
  --spacing-sm: 8rpx;
  --spacing-md: 16rpx;
  --spacing-lg: 24rpx;
  --spacing-xl: 32rpx;
}

// 布局工具类 - 使用单独定义而非@extend
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.text-center { text-align: center; }

// 基础组件样式
.card {
  background-color: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

// 主要页面样式
.giftbook-detail {
  min-height: 100vh;
  padding: var(--spacing-md);
}
</style> 